<style scoped>
  .item{
    line-height: 2rem;
  }
  .input{
    width: 80%;
    line-height: 2rem;
    height: 2rem;
    background-color: #fafafa;
  }

  .footer{
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
  }

  .footer>div{
    flex: 1;
    text-align: center;
    font-size: .9rem;
    line-height: 2.5rem;
    color: #fff;
  }

  .footerL{
    background-color: #0094db;
  }

  .footerR{
    background-color: #ce1b1b;
  }

  .main{
    padding-top: 2.2rem;
    font-size: .75rem;
  }

  .box{
    padding-bottom: 2.5rem;
  }
  .item{
  }

  .title{
    background-color: #fafafa;
    border-bottom: 1px solid #ddd;
    padding: 0 .5rem;
  }

  .info{
    padding: 0 .5rem;
    margin: .05rem 0;
    border-bottom: 1px solid #ddd;
  }

  .expensePop{
    width: 100%;
  }

  .popItem{
    font-size: .75rem;
    line-height: 2rem;
    padding: 0 .5rem;
  }

  .icon-enter{
    font-size: .75rem;
    line-height: 2rem;
    height: 1.75rem;
  }

  .icon-duihao{
    color: #0094db;
  }

  .illegalName{
    width: 7.5rem;
    height: 2rem;
    text-align: right;
  }

  .noReason{
    font-size: .6rem;
  }

</style>

<template>
  <div class="illegaLReason">
    <headNav centerTitle="违规情况" @headBack="back"></headNav>
    <div class="main">
      <div class="box">
        <div class="item" v-for="(value,key,index) in illegalData">
          <!--<div>{{value}}</div>-->
          <!--<div>{{value}}</div>-->
          <!--<div>{{index}}</div>-->

          <div class="fix title">
            <div class="l" v-if="illegalData.hasOwnProperty(key)">{{value.illegalIssueInfo}}<span v-if="!value.needExplain" class="noReason">(无需选择理由)</span></div>
            <div class="r illegalName ell">
              {{value.names}}
            </div>
          </div>
          <div class="info" @click="reasonsel(key)" v-if="value.needExplain">
            <input type="text" placeholder="请选择违规原因" v-model="value.text" class="input" readonly/><i class="iconfont icon-enter r"></i>
          </div>
          <div class="info" v-if="value.text == '其他'">
            <input type="text" placeholder="请手动输入其他违规原因" v-model.trim="value.otherText" class="input"/>
          </div>
        </div>
      </div>
      <div class="footer fix isFixed">
        <div class="footerL" @click="back">
          上一步
        </div>
        <div @click="goBooking" class="footerR">
          确认继续
        </div>
      </div>
    </div>

    <!--选择违规原因-->
    <mt-popup v-model="reasonShow" position="bottom" class = "expensePop">
      <div v-for="(pop,index) in reasonData" class="popItem" :class="{activePop:pop.selected}" @click="popActive(index,2)">
        {{pop.text}}<i class="iconfont icon-duihao r" v-show="pop.selected"></i>
      </div>
    </mt-popup>
  </div>
</template>

<script>
  import $ from 'webpack-zepto';
  import headNav from './head.vue'
  import {Popup,Indicator,Toast} from 'mint-ui'
  export default{
    data(){
      return {
        msg: 'hello vue',
        nameShow: false,
        reasonShow: false,
        illegalName: ['张', '王'],
        selectIndex: 0, /*选中的是第几条违规信息*/
        reasonOther: [],
        reasonNum: 0,//需要填写理由的个数
        data: [
          {
            "F001": {
              "illegalIssueInfo": "超出差旅标准",
              "names": "吴冕",
              "needExplain": true
            },
            "F003": {
              "illegalIssueInfo": "未提前预订",
              "names": "艾琳,艾琳,艾琳",
              "needExplain": true
            },
            "F004": {
              "illegalIssueInfo": "违反管控规则",
              "names": "艾琳,艾琳,艾琳",
              "needExplain": false
            }
          }
        ]
      }
    },
    components:{
      headNav
    },
    methods:{
      reasonsel(index){
        this.selectIndex = index;
        this.reasonShow = true;
      },
      popActive(index,type){
        switch (type){
          case 2:
            for (var k = 0; k < this.reasonData.length; k++) {
              this.reasonData[k].selected = false;
            }
            this.reasonData[index].selected = true;
            this.reasonShow = false;

            var illegalData = this.illegalData;

            illegalData[this.selectIndex].code = this.reasonData[index].code;
            illegalData[this.selectIndex].text = this.reasonData[index].text;
            break;
        }
      },
      /*点击返回车次列表*/
      back(){
       this.$store.state.illegalReasonList = [];
       this.$router.go(-1);
      },
      /*点击返回填单页*/
      goBooking(){
        var that = this;
        var illegalData = this.illegalData;
        for(var key in illegalData){
          if(illegalData.hasOwnProperty(key) && illegalData[key].needExplain) {
            if(!illegalData[key].text){
              that.$vux.alert.show({
                content: '请选择违规原因',
                onHide () {
                }
              })
              return
            }
             if(illegalData[key].text == '其他'){
               if(!illegalData[key].otherText){
                 that.$vux.alert.show({
                   content: '请补全其他违规原因',
                   onHide () {
                   }
                 })
                 return
               }else{
                 illegalData[key].text = illegalData[key].otherText
               }

             }
          }
        }

        var illegalList = [];

        for(var key in illegalData){
          if(illegalData.hasOwnProperty(key) && illegalData[key].needExplain) {
            var obj = {
               type:key,
               text:illegalData[key].text,
               code:illegalData[key].code,
            };
            illegalList.push(obj);
          }
        }

        this.$store.state.illegalReasonList = illegalList;
        this.$store.state.illegalPass = true;//告诉后台,前台原因已经原则ok
        this.$store.state.illegalReason = true; //告诉填单页,已选择好违规原因
        this.$router.go(-1);
      },
    },
    computed:{
      illegalData(){ //后台接收过来的违规人员数据
        return this.$store.state.illegalData[0]
      },
      reasonData(){  //违规原因选项
        var R=this.$store.state.reasonData;
        return R
      },
      illegalReasonList(){ //传给后台的违规原因数据
        return this.$store.state.illegalReasonList
      }

    },


  }
</script>

